<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-row items-center section_3 space-x-13">
				<u-search class="search" placeholder="搜索..." :show-action="false" actionText="搜索" bgColor="#fff"
					actionStyle="color:#74B72E" :animation="false" v-model="keyword" @search="toSearch"
					@custom="toSearch"></u-search>
			</view>
			<view class="flex-row group_2">
				<view class="flex-col justify-start items-center text-wrapper button" @click="toSort(0)" :style="indexList.sort==''?'color:#54BC6E;':''">
					<text class="font_2">综合排序</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_2 button" @click="toSort(1)" :style="indexList.sort=='sale'?'color:#54BC6E;':''">
					<text class="font_2">销量最高</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_2 button" @click="toSort(2)" :style="indexList.sort=='nearby'?'color:#54BC6E;':''">
					<text class="font_2">距离最近</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_2 button" @click="toSort(3)" :style="indexList.sort=='score'?'color:#54BC6E;':''">
					<text class="font_2">评分最高</text>
				</view>
			</view>
			<view class="flex-col list space-y-20">
				<view class="flex-row list-item" v-for="(item, index) in indexList.list" :key="index" @click="toBuy(item.shop_id)">
					<image class="shrink-0 self-center image_7" :src="item.cover" />
					<view class="flex-col flex-auto self-center group_3 space-y-23">
						<view class="flex-row items-center space-x-8">
							<text class="font_3">{{item.shop_name}}</text>
							<image class="image_8" v-if="item.is_license==1" src="/static/success.png" />
						</view>
						<view class="flex-row">
							<text class="font_4 text_5">{{item.score}}分</text>
							<view class="shrink-0 section_4 view"></view>
							<text class="font_5 text_6">人均￥{{item.avg_amounts}}</text>
							<view class="shrink-0 section_4 view_2"></view>
							<text class="font_5 text_7">销售{{item.sales}}</text>
						</view>
						<view class="flex-col justify-start items-center self-start text-wrapper_3" v-for="(item1,index1) in item.tags" :key="index1">
							<text class="font_6">{{item1}}</text>
						</view>
					</view>
					<text class="self-start font_7 text_8 text_9">距我{{item.distance}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		key: '3a26f7397fc12384590ae0a8ab25443b'
	});
	const {
		proxy
	} = getCurrentInstance()
	onMounted(() => {
		console.log("onMounted");
	})
	onLoad(() => {
		console.log("onload");
		showLoad.value = true
		getLocat()
		// getDate()
		// uni.setStorageSync('member_id',"1")
		uni.$on('mapList1', function(res) {
			console.log(res, "mapList1");
			address.value = res.address
			city_code.value = res.city_code
			// district_name.value = res.district_name
			// province_name.value = res.province_name
			indexList.value.list.length = 0
			// p.value = 1
			uni.setStorageSync('address', res)
			uni.setStorageSync('latitude', res.lat)
			uni.setStorageSync('longitude', res.lng)
			longitude.value = res.lng
			latitude.value = res.lat
			getlist()
		})
	})
	onShareAppMessage(() => {
		return {
			title: '', //分享的名称
			
		}
	})
	onShareTimeline(() => {
		return {
			title: '', //分享的名称
		}
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getlist()
	})

	onPullDownRefresh(() => {
		// getDate()
		console.log("下拉");
		indexList.list.length = 0
		tags.value.length = 0
		sort.value = ''
		// p.value = 1
		// getlist()
		uni.stopPullDownRefresh()
	})
	onShow(() => {
		indexList.sort = false
	})
	let globalData = ref(uni.getStorageSync('globalData') || '')

	let address = ref('###')
	let city_code = ref('')
	// let city_name = ref('')
	// let district_name = ref('')
	// let province_name = ref('')

	let currentSwiper = ref(0)

	const onChange = (e) => {
		// console.log(e);
		currentSwiper.value = e.detail.current
	}
	let keyword = ref('')
	// let tags = ref([])
	let sort = ref('')
	let p = ref(1)
	let showLoad = ref(false)
	let indexList = ref({
		content: {
			alert: []
		},
		swiperUrl: [],
		navs: [],
		tags: ['热销', '附近'],
		tag: 0,
		list: [],
		sort: '',
		show: false,
		newgoods: [],
		secgoods: [],
		timeData:{}
	})
	const getDate = () => {
		proxy.$req.requestGET(proxy.$api.IndexInfo.index).then(res => {
			// indexList.swiperUrl.push(...res.data.banners)
			indexList.value.swiperUrl = res.data.banners
			indexList.value.navs = res.data.navs
			// indexList.value.tags = res.data.tags
			// console.log(indexList.value);
		})
	}
	const getlist = () => {
		console.log(city_code.value);
		proxy.$req.requestPOST(proxy.$api.ShopInfo.getList, {
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
			citycode: uni.getStorageSync('citycode'),
			sort: indexList.value.sort,
			keyword:keyword.value,
			p:p.value
		}).then(res => {
			console.log(res);
			showLoad.value = false
			indexList.value.list = [...indexList.value.list, ...res.data.list]
			console.log(indexList.value.list);
		})
	}
	const onChangeDown = (e) => {
		indexList.value.timeData = e
	}
	const toTags = (v) => {
		indexList.value.tag = v
		indexList.value.list.length = 0
		// p.value = 1
		// if (tags.value.indexOf(v.name) == -1) {
		// 	tags.value.push(v.name)
		// } else {
		// 	tags.value.splice(tags.value.indexOf(v.name), 1)
		// }
		getlist()
	}
	const toSort = (num) => {
		if (num == 0) {
			indexList.value.sort = ''
		} else if (num == 1) {
			indexList.value.sort = 'sale'
		} else if (num == 2) {
			indexList.value.sort = 'nearby'
		} else if (num == 3) {
			indexList.value.sort = 'score'
		}
		p.value=1
		indexList.value.list.length = 0
		getlist()
	}
	const toSearch = () => {
		indexList.value.sort = ''
		p.value=1
		indexList.value.list.length = 0
		getlist()
	}
	const toTarget = (v) => {
		console.log(v);
		switch (v.target_rule) {
			case '1':
				//网址
				uni.navigateTo({
					url: "/pages/webHttp/webHttp?url=" + JSON.stringify(v.param)
				})
				break;
			case '2':
				//商家列表(标签) -- 标签ID 　
				uni.navigateTo({
					url: "/pages/business/business?tag_id="+v.param
				})
				break;
			case '3':
				//商家列表(关键词) -- 关键词
				uni.navigateTo({
					url: "/pages/business/business?keywords="+v.param
				})
				break;
			case '4':
				//商家详情--商家ID
				uni.navigateTo({
					url: "/pages/businessDetail/businessDetail?shop_id="+v.param
				})
				break;
			default:
				break;
		}
	}
	const toBuy = (shop_id) => {
		uni.navigateTo({
			url: '/pages/businessDetail/businessDetail?type=1&shop_id=' + shop_id
		})
	}
	const toLocate = () => {
		uni.navigateTo({
			url: '/pages/location/location'
		})
	}
	
	const toBusiness = (shop_id, v) => {
		if (v.is_on == 0) {
			uni.showToast({
				title: '该商家未营业',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/business/business?shop_id=' + shop_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group {
			padding: 24rpx 30rpx 7rpx;
			overflow-y: auto;

			.section_3 {
				// padding: 20rpx 30rpx;
				// background-color: #ffffff;
				border-radius: 34rpx;

				.image_6 {
					width: 28rpx;
					height: 28rpx;
				}

				.text_4 {
					color: #999999;
					font-size: 26rpx;
					font-family: PingFangHeiTC;
					line-height: 25rpx;
				}
			}

			.space-x-13 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 13rpx;
				}
			}

			.group_2 {
				margin-top: 34rpx;

				.text-wrapper {
					flex: 1 1 152rpx;
					font-size: 22rpx;
					font-family: PingFangHeiTC;
					line-height: 21rpx;
					color: #666666;
				}

				.button {
					padding: 16rpx 0;
					background-color: #efefef;
					border-radius: 10rpx;
					height: 54rpx;
				}

				.text-wrapper_2 {
					flex: 1 1 152rpx;
					margin-left: 28rpx;
					font-size: 22rpx;
					font-family: PingFangHeiTC;
					line-height: 21rpx;
					color: #666666;
				}
			}

			.list {
				margin-top: 28rpx;

				.list-item {
					padding: 32rpx 28rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.image_7 {
						border-radius: 20rpx;
						width: 196rpx;
						height: 148rpx;
					}

					.group_3 {
						margin-left: 20rpx;

						.space-x-8 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 8rpx;
							}

							.font_3 {
								font-size: 32rpx;
								font-family: PingFangSC;
								line-height: 31rpx;
								color: #333333;
							}

							.image_8 {
								width: 22rpx;
								height: 25rpx;
							}
						}

						.font_4 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 21rpx;
							color: #f52c2c;
						}

						.text_5 {
							line-height: 22rpx;
						}

						.section_4 {
							background-color: #c1c1c1;
							border-radius: 0.5rpx;
							width: 1rpx;
							height: 20rpx;
						}

						.view {
							margin-left: 9rpx;
						}

						.font_5 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 23rpx;
							color: #585858;
						}

						.text_6 {
							margin-left: 11rpx;
						}

						.view_2 {
							margin-left: 11rpx;
						}

						.text_7 {
							margin-left: 16rpx;
						}

						.text-wrapper_3 {
							padding: 8rpx 0;
							background-color: #eff5f0;
							border-radius: 6rpx;
							width: 80rpx;

							.font_6 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 21rpx;
								color: #54bc6e;
							}
						}
					}

					.space-y-23 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 23rpx;
						}
					}

					.font_7 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 21rpx;
						color: #aeaeae;
					}

					.text_8 {
						margin-left: 6rpx;
						margin-top: 114rpx;
						line-height: 22rpx;
					}

					.text_9 {
						margin-top: 115rpx;
					}
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>